<script lang="ts" setup>
import { useAttrs, computed } from 'vue'
const attrs = useAttrs()

interface Props {
  value: string
}
const props = defineProps<Props>()
const emits = defineEmits(['update:value'])
const value = computed({
  get() {
    return props.value
  },
  set(val) {
    emits('update:value', val)
  }
})
const validate = () => {
  console.log('背景颜色，在此校验')
}
defineExpose({
  validate
})
</script>
<template>
  <div class="le-color-warpper" v-bind="attrs">
    <a-input v-model:value="value" v-bind="attrs.input" class="le-color__input" />
    <div class="le-color__show" :style="{backgroundColor: value}"></div>
  </div>
</template>
<style>
.le-color-warpper {
  display: flex;
  text-align: center;
  justify-content: center;
  padding: 20px 0;
}
.le-color__input{
  width: 120px !important;
}
.le-color__show {
  width: 32px;
  height: 32px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  margin-left: 10px;
}
</style>
